<template>
  <view class="container">



    <!-- 选项卡导航 -->
    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 'electric' }" @click="switchTab('electric')">
        电费充值
      </view>
      <view class="tab" :class="{ active: activeTab === 'coldwater' }" @click="switchTab('coldwater')">
        冷水充值
      </view>
      <view class="tab" :class="{ active: activeTab === 'hotwater' }" @click="switchTab('hotwater')">
        热水充值
      </view>
    </view>



    <!-- 数据表格 -->
    <scroll-view class="table" scroll-x="true">
      <view class="table-header">
        <text class="table-cell" v-if="activeTab !== 'hotwater'">房间号</text>
        <text class="table-cell">充值金额(元)</text>
        <text class="table-cell" v-if="activeTab !== 'hotwater'">充值人</text>
        <text class="table-cell">充值时间</text>
        <text class="table-cell">状态</text>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="data.length === 0">
        <text class="empty-icon">📄</text>
        <text class="empty-text">暂无充值记录</text>
      </view>

      <!-- 数据行 -->
      <view class="table-row" v-for="(item, index) in paginatedData" :key="index" v-else>
        <text class="table-cell" v-if="activeTab !== 'hotwater'">{{ item.SS_MC || '-' }}</text>
        <text class="table-cell">{{ item.money }}</text>
        <text class="table-cell" v-if="activeTab !== 'hotwater'">{{ item.name || '-' }}</text>
        <text class="table-cell">{{ item.displayTime }}</text>
        <text class="table-cell">{{ item.payState }}</text>
      </view>
    </scroll-view>

    <!-- 分页控件 -->
    <view class="pagination" v-if="data.length > 0">
      <text class="pagination-button" @click="prevPage" :class="{ disabled: currentPage === 1 }">上一页</text>
      <text class="pagination-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
      <text class="pagination-button" @click="nextPage" :class="{ disabled: currentPage === totalPages }">下一页</text>
    </view>
  </view>
</template>

<script>
  import SearchDateRange from '@/component/SearchDateRange.vue';
  import {
    ajax
  } from '../../utils/request.js';
  import {
    formatTimeAndSort
  } from '../../utils/formatTimeAndSort.js';

  export default {
    components: {
      SearchDateRange
    },
    data() {
      return {
        activeTab: 'electric', // 当前激活的选项卡
        data: [], // 当前选项卡的数据
        currentPage: 1,
        itemsPerPage: 10,
        start: null,
        end: null,

        // 选项卡标题映射
        tabTitles: {
          electric: '电费充值记录',
          coldwater: '冷水充值记录',
          hotwater: '热水充值记录'
        },

        // 接口配置
        apiConfig: {
          electric: {
            url: '/api/meter/getrechargerecord',
            dataKey: 'rechargerecord'
          },
          coldwater: {
            url: '/api/meter/getwaterrechargerecord',
            dataKey: 'coldwaterrechargerecord'
          },
          hotwater: {
            url: '/api/meter/hotgetwaterrechargerecord',
            dataKey: 'hotwaterrechargerecord'
          }
        }
      };
    },
    computed: {
      currentTitle() {
        return this.tabTitles[this.activeTab];
      },
      totalPages() {
        return Math.ceil(this.data.length / this.itemsPerPage);
      },
      paginatedData() {
        const start = (this.currentPage - 1) * this.itemsPerPage;
        const end = start + this.itemsPerPage;
        return this.data.slice(start, end);
      }
    },
    onShow() {
      this.start = null;
      this.end = null;
      this.fetchData();
    },
    methods: {
      // 返回上一页
      goBack() {
        uni.navigateBack();
      },

      // 切换选项卡
      switchTab(tab) {
        if (this.activeTab !== tab) {
          this.activeTab = tab;
          this.currentPage = 1;
          this.fetchData();
        }
      },



      // 上一页
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },

      // 下一页
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      },

      // 获取数据
      fetchData() {
        const config = this.apiConfig[this.activeTab];
        const hasTimeRange = this.start && this.end;

        let postData = {
          ss_mc: uni.getStorageSync('SS_MC')
        };

        // 冷水充值和热水充值需要userId
        if (this.activeTab === 'coldwater' || this.activeTab === 'hotwater') {
          postData.userId = uni.getStorageSync('userId');
        }

        if (hasTimeRange) {
          postData.strTime = this.start;
          postData.endTime = this.end;
        }

        uni.showLoading({
          title: '加载中...'
        });

        ajax(config.url, 'POST', postData)
          .then(data => {
            console.log('成功数据:', data);
            this.data = formatTimeAndSort(data.data[config.dataKey] || []);
            this.currentPage = 1;
          })
          .catch(error => {
            console.error('请求失败:', error);
            this.data = [];
            uni.showToast({
              title: '加载失败',
              icon: 'none'
            });
          })
          .finally(() => {
            uni.hideLoading();
          });
      }
    }
  };
</script>

<style scoped>
  .container {
    background-color: #f7f7f7;
    min-height: 100vh;
  }



  .back-button {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
  }



  /* 选项卡 */
  .tabs {
    display: flex;
    background-color: #f1f1f1;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0px;
    z-index: 99;
  }

  .tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    color: #666;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
  }

  .tab.active {
    color: #07C160;
    font-weight: 500;
  }

  .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 3px;
    background-color: #07C160;
    border-radius: 3px;
  }

  /* 表格样式 */
  .table {
    margin: 10px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .table-header,
  .table-row {
    width: 250%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 0.1px solid #e3e3e3;
    white-space: nowrap;
  }

  .table-header {
    background-color: #f5f5f5;
    font-weight: 500;
  }

  .table-cell {
    width: 40%;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    justify-content: space-between;
  }

  /* 空状态 */
  .empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #999;
  }

  .empty-icon {
    font-size: 50px;
    margin-bottom: 15px;
    display: block;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 16px;
  }

  /* 分页 */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background: white;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .pagination-button {
    padding: 8px 15px;
    color: #07C160;
    border: 1px solid #07C160;
    border-radius: 5px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
  }

  .pagination-button.disabled {
    color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
  }

  .pagination-button:not(.disabled):active {
    background-color: #07C160;
    color: white;
  }

  .pagination-info {
    font-size: 14px;
    color: #666;
  }

  /* 响应式设计 */
  @media (max-width: 480px) {
    .header-title {
      font-size: 16px;
    }

    .tab {
      font-size: 14px;
      padding: 12px 0;
    }

    .table-header,
    .table-row {
      height: 45px;
    }

    .table-cell {
      font-size: 14px;
    }

    .pagination-button {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
</style>